<!-- 起草 需要先一步展示的列表界面 -->
<template>
    <div id="showpop">

        <div class="nav bg-theme color-f text-l">
            <div style="display:flex;flex:2;">

                <i class="iconfont icon-fanhui font19 pl08 iback" @click="$router.back(-1)"></i>
                <span class="font19 ml16"> {{ pageTitle }}</span>
            </div>

            <span v-if="hasSearchButton" style="margin-right:10px;margin-left:10px">
                <van-icon @click="showFilterPopupView = true" name="search" size="25" />
            </span>
        </div>

        <div class="pageView">

            <component :is="currentTableView" ref="filterView" :params="params" style="height:calc(100vh-50px)" />

            <van-popup v-model="showFilterPopupView" position="top" style="padding:20px 0 20px 0"
                get-container="#showpop">

                <van-form @submit="sureButtonClick" @failed="failedMethod">

                    <!-- 企业模糊查询 -->
                    <div v-if="params.code == 'qyzx_qymhcx'">
                        <van-field required label-width="5.5em" v-model="searchKey" label="搜索关键字:"
                            placeholder="请填写搜索关键字" :rules="[{ required: true, message: '' }]" />
                        <van-field :readonly="true" right-icon="arrow" @click="typeShowBottomPopup()"
                            label-width="4.5em" v-model="typeName" label="企业分类:" placeholder="请填写企业分类" />
                        <van-field :readonly="true" required right-icon="arrow" @click="keyTypeShowBottomPopup()"
                            label-width="5.5em" v-model="keyTypeName" label="关键词类型:" placeholder="请填写关键词类型"
                            :rules="[{ required: true, message: '' }]" />
                    </div>


                    <!-- 企业精确查询 -->
                    <div v-if="params.code == 'qyzx_qyjqcx'">
                        <van-field required label-width="5.5em" v-model="keyWord" label="关键字:" placeholder="请填写关键字"
                            :rules="[{ required: true, message: '' }]" />
                        <van-field :readonly="true" right-icon="arrow" @click="typeShowBottomPopup()"
                            label-width="4.5em" v-model="typeName" label="企业分类:" placeholder="请填写企业分类" />
                    </div>


                    <!-- 股权关系查询 -->
                    <!-- 企业风险查询 -->
                    <div v-if="params.code == 'qyzx_gqgxcx' || params.code == 'qyzx_qyfxcx'">
                        <van-field required label-width="8.5em" v-model="uniscid" label="统一社会信用代码:"
                            placeholder="请填写统一社会信用代码" :rules="[{ required: true, message: '' }]" />
                        <van-field required label-width="12.5em" v-model="entName" label="企业名称/个体工商户名称:"
                            placeholder="请填写企业名称/个体工商户名称" :rules="[{ required: true, message: '' }]" />
                    </div>


                    <!-- 企业关联查询 -->
                    <div v-if="params.code === 'qyzx_qyglcx'">
                        <van-field required label-width="8.5em" v-model="projectCode" label="全网统一项目编码:"
                            placeholder="请填写全网统一项目编码" :rules="[{ required: true, message: '' }]" />
                        <van-field required label-width="4.5em" v-model="searchKey" label="企业名称:" placeholder="请填写企业名称"
                            :rules="[{ required: true, message: '' }]" />
                        <van-field :readonly="true" right-icon="arrow" @click="attIdsShowBottomPopup()" required
                            label-width="4.5em" v-model="attIdsName" label="过滤关系:" placeholder="请填写过滤关系"
                            :rules="[{ required: true, message: '' }]" />
                        <van-field :readonly="true" right-icon="arrow" required @click="leavelShowBottomPopup()"
                            label-width="2.5em" v-model="level" label="层级:" placeholder="请填写层级"
                            :rules="[{ required: true, message: '' }]" />
                    </div>


                    <!-- 按钮 -->
                    <div style="display: flex;margin:20px 0 0 0">
                        <div style="width:50% ;text-align: center;">
                            <van-button style=" display: inline-block;margin:0 20px 0 20px;padding:0 36px 0 36px"
                                @click="resetButtonClick()" native-type="button" type="default">
                                重置</van-button>
                        </div>

                        <div style="width:50%;text-align: center;">
                            <van-button style=" display: inline-block; margin:0 20px 0 20px; padding:0 36px 0 36px"
                                native-type="submit" type="primary" color="#60a9ec">
                                查询</van-button>
                        </div>
                    </div>

                </van-form>
            </van-popup>

            <van-popup v-model="showTypePopup" position="bottom" get-container="#app">
                <van-picker value-key="name" visible-item-count="6" show-toolbar :columns="typeColumns"
                    @confirm="showConfirm" @cancel="showTypePopup = false" />
            </van-popup>

        </div>
    </div>
</template>

<script>


import jAccountUtil from '@/assets/js/qyzx_helper';
import { qyzx_qymhcx, qyzx_qyjqcx, qyzx_gqgxcx, qyzx_qyfxcx, qyzx_qyglcx } from '@/assets/js/qyzx_helper'
import Qyzx_content_tab from "./qyzx_content_tab.vue";



import { mapGetters } from "vuex"
import { Notify, Toast } from 'vant'
import moment from 'moment'
import { getDictList } from '@/api/dictapi'

export default {
    data() {
        return {

            params: {},

            pageTitle: '',
            currentTableView: '',

            showFilterPopupView: false,

            // 1: 模糊查询 
            keyType: '',    // 关键词类型：1 名称 2 统一社会信用代码 
            keyTypeName: '',
            type: '',       // 企业分类：1 企业 2 个体 
            typeName: '',
            searchKey: '',  // 搜索关键词

            // 2. 精确查询
            keyWord: '',    // 关键词

            // 3. 股权关系查询
            // 4. 企业风险查询
            uniscid: '',    // 统一社会信用代码
            entName: '',   // 企业名称/个体工商户名称

            // 5. 企业关联查询
            projectCode: '',
            attIds: '',
            attIdsName: '',
            level: '',



            // 底部弹窗
            typeColumns: [],
            showTypePopup: false,
            optionType: '',     // 底部弹窗类型

            hasSearchButton: true,
        }
    },
    computed: {
        ...mapGetters(['user']),
        ...mapGetters(['userinfo']),




    },

    //生命周期--创建完成
    created() {

        this.getCurrentView();
    },


    beforeRouteEnter(to, from, next) {

        next(vm => {

            // console.log('AA', to, 'AAAA', from);
            // 通过 `vm` 访问组件实例
            if (from.name === 'apcdetail') {

                vm.params = to.query;
                vm.getCurrentView();
            }
        });
    },


    components: {
        Qyzx_content_tab,
    },
    //生命周期--创建完成
    activated() {
    },
    //生命周期--挂载完成
    mounted() {
    },




    //方法调用
    methods: {


        // 配置展示的真实界面
        getCurrentView() {

            this.params = this.$route.query

            this.currentTableView = Qyzx_content_tab;
            this.pageTitle = this.params.value;
        },


        goBack() {
            this.$router.back(-1) //返回上一页
        },

        leavelShowBottomPopup() {
            this.typeColumns = [{ value: '1', name: '1' },
            { value: '2', name: '2' },
            { value: '3', name: '3' },
            { value: '4', name: '4' },
            { value: '5', name: '5' },
            { value: '6', name: '6' }];
            this.optionType = 'level';

            this.showTypePopup = true;
        },
        
        attIdsShowBottomPopup() {

            this.typeColumns = [{ value: 'R101', name: 'R101 企业对外投资' },
                { value: 'R102', name: 'R102 企业股东' },
                { value: 'R103', name: 'R103 自然人对外投资' },
                { value: 'R104', name: 'R104 自然人股东' },
                { value: 'R105', name: 'R105 管理人员公司任职' },
                { value: 'R106', name: 'R106 公司管理人员' },
                { value: 'R107', name: 'R107 分支机构' },
                { value: 'R108', name: 'R108 总部' },
                { value: 'R111', name: 'R111 企业关联注册地' },
                { value: 'R112', name: 'R112 注册地关联企业' },
                { value: 'R113', name: 'R113 企业关联邮箱/电话' },
                { value: 'R114', name: 'R114 邮箱/电话关联企业' },];
            this.optionType = 'attIds';

            this.showTypePopup = true;
        },

        keyTypeShowBottomPopup() {

            this.typeColumns = [{ value: 1, name: '名称' }, { value: 2, name: '统一社会信用代码' }];
            this.optionType = 'keyType';

            this.showTypePopup = true;
        },

        typeShowBottomPopup() {

            this.typeColumns = [{ value: 1, name: '企业' }, { value: 2, name: '个体' }];
            this.optionType = 'type';

            this.showTypePopup = true;
        },

        showConfirm(value) {

            if (this.optionType == 'keyType') {
                this.keyType = value.value;
                this.keyTypeName = value.name;
            }
            else if (this.optionType == 'type') {
                this.type = value.value;
                this.typeName = value.name;
            }
            else if (this.optionType == 'attIds') {
                this.attIds = value.value;
                this.attIdsName = value.name;
            }
            else if (this.optionType == 'level') {
                this.level = value.value;
            } 
            
            this.showTypePopup = false
        },



        resetButtonClick() {

            this.showFilterPopupView = false;
            let code = this.params.code;
            if (code === qyzx_qymhcx) {

                this.type = '';
                this.keyType = ''; 
                this.searchKey = '';
                let requestParam = { type: this.type, keyType: this.keyType, searchKey: this.searchKey };
                this.$refs.filterView.requestDataWithFliterCondition(requestParam);
            }
            else if (code === qyzx_qyjqcx) {

                this.type = '';
                this.keyWord = '';
                let requestParam = { type: this.type, keyWord: this.keyWord };
                this.$refs.filterView.requestDataWithFliterCondition(requestParam);
            }
            else if (code === qyzx_gqgxcx || code === qyzx_qyfxcx) {

                this.uniscid = '';
                this.entName = '';
                let requestParam = { uniscid: this.uniscid, entName: this.entName };
                this.$refs.filterView.requestDataWithFliterCondition(requestParam);
            }
            else if (code === qyzx_qyglcx) {

                this.searchKey = '';
                this.projectCode = '';
                this.attIds = '';
                this.attIdsName = '';
                this.level = '';
                let requestParam = { searchKey: this.searchKey, projectCode: this.projectCode, attIds: this.attIds, level: this.level };
                this.$refs.filterView.requestDataWithFliterCondition(requestParam);
            }
        },




        failedMethod(data) {

            // const errorArr = data.errors;
            // const errorObj = errorArr[0];
            // const errorMessage = errorObj.message;
            // Toast({ type: 'text', message: errorMessage, duration: 1000 });
        },

        sureButtonClick() {

            this.showFilterPopupView = false;
            let code = this.params.code;
            if (code === qyzx_qymhcx) {

                let requestParam = { type: this.type, keyType: this.keyType, searchKey: this.searchKey };
                this.$refs.filterView.requestDataWithFliterCondition(requestParam);
            }
            else if (code === qyzx_qyjqcx) {

                let requestParam = { type: this.type, keyWord: this.keyWord };
                this.$refs.filterView.requestDataWithFliterCondition(requestParam);
            }
            else if (code === qyzx_gqgxcx || code === qyzx_qyfxcx) {

                let requestParam = { uniscid: this.uniscid, entName: this.entName };
                this.$refs.filterView.requestDataWithFliterCondition(requestParam);
            }
            else if (code === qyzx_qyglcx) {

                let requestParam = { searchKey: this.searchKey, projectCode: this.projectCode, attIds: this.attIds, level: this.level };
                this.$refs.filterView.requestDataWithFliterCondition(requestParam);
            }
        },




    }
}
</script>

<style scoped>
.errorPlace {
    position: absolute;
    margin-top: -80px;
    top: 50%;
    margin-left: -50px;
    left: 50%;
}
</style>